<template>
  <div class="product-container">
    <!-- 内容main -->
    <el-main v-show="true">
      <el-row :gutter="20">
        <!-- 左侧 -->
        <el-col :span="6" class="echarts_left">
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span>产蛋指标 / 万枚</span>
              </div>
            </template>
            <div
              class="card-body"
              ref="eggChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
            ></div>
          </el-card>
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span>产蛋率 / %</span>
              </div>
            </template>
            <div
              class="card-body"
              ref="eggRateChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
            ></div>
          </el-card>
          <el-card style="max-width: 480px">
            <template #header>
              <div class="card-header">
                <span>料蛋比 / g</span>
              </div>
            </template>
            <div
              class="card-body"
              ref="rateChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
            ></div>
          </el-card>
        </el-col>
        <!-- 主视觉 -->
        <el-col :span="12" class="main_view">
          <div class="main-house">
            <el-select
              v-model="value"
              placeholder="请选择农场"
              style="width: 240px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="6" class="echarts_right">
          <el-card style="max-width: 480px" class="slaughter">
            <template #header>
              <div class="card-header">
                <span>死淘指标 / 羽</span>
              </div>
            </template>
            <div
              class="card-body"
              ref="deadChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
            ></div>
          </el-card>
          <el-card style="max-width: 480px" class="envControl">
            <template #header>
              <div class="card-header">
                <span>耗料 / kg</span>
              </div>
            </template>
            <div
              class="card-body"
              ref="consumeChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
            ></div>
          </el-card>
          <el-card style="max-width: 480px" class="monitor">
            <template #header>
              <div class="card-header">
                <span>耗水 / m³</span>
                <!-- <span class="see-all" @click="seeAll">查看全部</span> -->
              </div>
            </template>
            <div
              class="card-body"
              ref="waterChartRef"
              v-loading="fullscreenLoading"
              element-loading-background="rgba(122, 122, 122, 0.3)"
            ></div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script setup name="Product">
import { timestamp } from '@vueuse/core';
import * as echarts from "echarts";
// import { da } from 'element-plus/es/locale';
import {
  onMounted,
  ref,
  watch,
  watchEffect,
  reactive,
  onUnmounted,
  computed,
} from "vue";

const router = useRouter();


/** getCurrentInstance使用注意点
 * getCurrentInstance 只能在 setup 或生命周期钩子中使用
 * getCurrentInstance线上环境报错问题: 使用proxy代替ctx,proxy线上不会出现问题
 * 在vue3中不推荐使用getCurrentInstance获取组件实例
 * 如果是获取dom大家可以通过ref获取
 * 至于其他的一些常用属性和方法，vue3中的setup中提供了props和contexts上下文
 */
const { proxy } = getCurrentInstance();
const value = ref('广兴01舍')
const options = [
  {
    value: 'Option1',
    label: '广兴01舍',
  },
  {
    value: 'Option2',
    label: '广兴02舍',
  },
  {
    value: 'Option3',
    label: '广兴03舍',
  },
  {
    value: 'Option4',
    label: '广兴04舍',
  },
  {
    value: 'Option5',
    label: '广兴05舍',
  },
]


/** 创建一个响应式变量currentTime，初始值为空字符串 */
const deadChartRef = ref(null); //死淘
const consumeChartRef = ref(null);//耗料
const waterChartRef = ref(null);//耗水
const eggChartRef = ref(null);//产蛋
const eggRateChartRef = ref(null);//产蛋率
const rateChartRef = ref(null);//料蛋比

const diary = ref(null);
const eggDay = ref(0);
const consumeDay = ref(0);
const waterDay = ref(0);
const eggRateDay = ref(0);

const dead = ref(null);
const deadSer = ref([]);
const consume = ref(null);
const consumeSer = ref([]);
const water = ref(null);
const waterSer = ref([]);
const egg = ref(null);
const eggSer = ref([]);
const eggRate = ref(null);//1111
const eggRateSer = ref([]); //产蛋率
const rate = ref(null);
const rateSer = ref([]);

const fullscreenLoading = ref(false);

const get7Day = () => {
  let today = new Date();

  // 获取前七天的日期
  let date1 = new Date(today.getTime() - 0 * 24 * 60 * 60 * 1000);
  let date2 = new Date(today.getTime() - 1 * 24 * 60 * 60 * 1000);
  let date3 = new Date(today.getTime() - 2 * 24 * 60 * 60 * 1000);
  let date4 = new Date(today.getTime() - 3 * 24 * 60 * 60 * 1000);
  let date5 = new Date(today.getTime() - 4 * 24 * 60 * 60 * 1000);
  let date6 = new Date(today.getTime() - 5 * 24 * 60 * 60 * 1000);
  let date7 = new Date(today.getTime() - 6 * 24 * 60 * 60 * 1000);

  date1 =
    date1.getFullYear() + "-" + ((date1.getMonth() + 1)>=10?(date1.getMonth() + 1):"0"+(date1.getMonth() + 1)) + "-" + ((date1.getDate())>=10?(date1.getDate()):"0" + date1.getDate());
  date2 =
    date2.getFullYear() + "-" + ((date2.getMonth() + 1)>=10?(date2.getMonth() + 1):"0"+(date2.getMonth() + 1)) + "-" + ((date2.getDate())>=10?(date2.getDate()):"0" + date2.getDate());
  date3 =
    date3.getFullYear() + "-" + ((date3.getMonth() + 1)>=10?(date3.getMonth() + 1):"0"+(date3.getMonth() + 1)) + "-" + ((date3.getDate())>=10?(date3.getDate()):"0" + date3.getDate());
  date4 =
    date4.getFullYear() + "-" + ((date4.getMonth() + 1)>=10?(date4.getMonth() + 1):"0"+(date4.getMonth() + 1)) + "-" + ((date4.getDate())>=10?(date4.getDate()):"0" + date4.getDate());
  date5 =
    date5.getFullYear() + "-" + ((date5.getMonth() + 1)>=10?(date5.getMonth() + 1):"0"+(date5.getMonth() + 1)) + "-" + ((date5.getDate())>=10?(date5.getDate()):"0" + date5.getDate());
  date6 =
    date6.getFullYear() + "-" + ((date6.getMonth() + 1)>=10?(date6.getMonth() + 1):"0"+(date6.getMonth() + 1)) + "-" + ((date6.getDate())>=10?(date6.getDate()):"0" + date6.getDate());
  date7 =
    date7.getFullYear() + "-" + ((date7.getMonth() + 1)>=10?(date7.getMonth() + 1):"0"+(date7.getMonth() + 1)) + "-" + ((date7.getDate())>=10?(date7.getDate()):"0" + date7.getDate());

  date.value = [date7, date6, date5, date4, date3, date2, date1];
  console.log("🚀 ~ get7Day ~ date.value:", date.value)
  
};

const date = ref([]);

const cunlan = ref(null);

const data = reactive({
  weatherList: {},
});

const { weatherList } = toRefs(data);

const countTotal = (arr, keyName) => {
  let $total = 0;
  $total = arr.reduce(function (total, currentValue, currentIndex, arr) {
    return currentValue[keyName] ? total + currentValue[keyName] : total;
  }, 0);
  return $total;
};

onMounted(() => {});

// 使用 watchEffect 来响应数据的变化
watchEffect(() => {});

function updateChartData(chartDate, chartInstance, seriesData) {
  let option = {
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "14",
      left: "3%",
      right: "4%",
      bottom: "6%",
      containLabel: true,
    },
    yAxis: {
      type: "value",
      // interval: 200, // n为要显示的间隔数量
      axisLine: { show: false }, // 隐藏Y轴线
      axisLabel: {
        show: true,
        color: "#fff", // 设置x轴文字颜色为红色
      }, // 显示Y轴标签
      splitLine: { show: false }, // 隐藏分隔线
    },
    xAxis: {
      type: "category",
      // data: chartDate,
      data: chartDate.map(timestamp => new Date(timestamp).toLocaleDateString()), // 使用日期字符串显示
      axisTick: {
        alignWithLabel: true,
      },
      axisLabel: {
        show: true,
        color: "#fff", // 设置x轴文字颜色为红色
      },
    },
    series: seriesData, // 使用处理后的数据
  };
  chartInstance.setOption(option);
}

async function getList() {
  fullscreenLoading.value = false;
  // await getDiary();
  await getDead();//死淘
  await getConsume();//耗料
  await getWater();//耗水
  await getEgg();//产蛋

  await getEggRate();
  await getRate();//料蛋比
  fullscreenLoading.value = false;
}

const getDiary = async () => {
  const farmId = {
    farmId: 327,
  };
  const res = await listDiary(farmId);

  diary.value = res.rows;
  console.log("🚀 ~ getDiary ~ diary.value:", diary.value);

  cunlan.value = (countTotal(res.rows, "remain") / 10000).toFixed(1);
  eggDay.value = (countTotal(res.rows, "eggNum") / 360).toFixed(0);
  consumeDay.value = (countTotal(res.rows, "consumeWeight") / 1000).toFixed(1);
  waterDay.value = countTotal(res.rows, "waterWeight").toFixed(1);
  eggRateDay.value = ((countTotal(res.rows, "eggNum")/10000 / cunlan.value) * 100).toFixed(1);
};

// 死淘
const getDead = async () => {
  deadSer.value = []; // 清空之前的系列数据

  // 定义静态数据（示例数据，假设每个房间的死淘量）
  const staticDeadData = {
    "gx01": [
      { deadTime: "2025-4-01", sum: 10 },
      { deadTime: "2025-4-02", sum: 12 },
      { deadTime: "2025-4-03", sum: 8 },
      { deadTime: "2025-4-04", sum: 15 },
      { deadTime: "2025-4-05", sum: 11 },
      { deadTime: "2025-4-06", sum: 20 },
      { deadTime: "2025-4-07", sum: 18 },
    ],
    "gx02": [
      { deadTime: "2025-4-01", sum: 5 },
      { deadTime: "2025-4-02", sum: 6 },
      { deadTime: "2025-4-03", sum: 7 },
      { deadTime: "2025-4-04", sum: 9 },
      { deadTime: "2025-4-05", sum: 10 },
      { deadTime: "2025-4-06", sum: 8 },
      { deadTime: "2025-4-07", sum: 11 },
    ],
  };

  const allDeadDates = new Set(); // 用于存储唯一的时间戳数据
  const deadDataMap = {}; // 用于存储每个房间的数据

  // 遍历静态数据
  for (let roomKey in staticDeadData) {
    const roomData = staticDeadData[roomKey];

    // 提取死淘量和时间戳
    const deadSums = roomData.map(item => item.sum); // 总数
    const deadTimes = roomData.map(item => item.deadTime); // 时间戳
    
    // 存储当前房间的数据
    deadDataMap[roomKey] = {
      sums: deadSums,
      times: deadTimes
    };

    // 合并时间戳到 Set
    deadTimes.forEach(timestamp => {
      allDeadDates.add(timestamp);
    });
  }

  // 将日期转换为已排序的数组
  const sortedDeadDates = Array.from(allDeadDates).sort();

  // 为每个房间填充缺失日期的数据
  for (let roomKey in deadDataMap) {
    const { sums, times } = deadDataMap[roomKey];
    const seriesData = sortedDeadDates.map(date => {
      const index = times.indexOf(date);
      return index !== -1 ? sums[index] : 0; // 如果没有数据，填充 0
    });

    // 将数据添加到 deadSer
    deadSer.value.push({
      name: roomKey, // 房间名称
      type: "bar",
      stack: "总计", // 堆叠名称
      label: {
        show: true,
        position: "inside",
        textStyle: { color: "#fff" },
        formatter: function (params) {
          return params.value !== 0 ? params.value : ''; // 仅在值不为0时显示标签
        },
      },
      emphasis: {
        focus: "series",
      },
      data: seriesData, // 使用死淘量作为 Y 轴数据
    });
  }

  // 调用更新图表的函数
  const deadChartInstance = echarts.init(deadChartRef.value);
  updateChartData(sortedDeadDates, deadChartInstance, deadSer.value); // 使用已排序的日期
  window.addEventListener("resize", () => {
    deadChartInstance.resize();
  });
};
// 耗料
const getConsume = async () => {
  consumeSer.value = []; // 清空之前的系列数据

  // 定义静态数据（示例数据，假设每个房间的耗料量）
  const staticConsumeData = {
    "gx01": [
      { consumeTime: "2025-4-01", weight: 200 },
      { consumeTime: "2025-4-02", weight: 210 },
      { consumeTime: "2025-4-03", weight: 195 },
      { consumeTime: "2025-4-04", weight: 220 },
      { consumeTime: "2025-4-05", weight: 215 },
      { consumeTime: "2025-4-06", weight: 230 },
      { consumeTime: "2025-4-07", weight: 225 },
    ],
    "gx02": [
      { consumeTime: "2025-4-01", weight: 180 },
      { consumeTime: "2025-4-02", weight: 190 },
      { consumeTime: "2025-4-03", weight: 185 },
      { consumeTime: "2025-4-04", weight: 200 },
      { consumeTime: "2025-4-05", weight: 198 },
      { consumeTime: "2025-4-06", weight: 210 },
      { consumeTime: "2025-4-07", weight: 205 },
    ],
  };

  const allConsumeDates = new Set(); // 用于存储唯一的时间戳数据
  const consumeDataMap = {}; // 用于存储每个房间的数据

  // 遍历静态数据
  for (let roomKey in staticConsumeData) {
    const roomData = staticConsumeData[roomKey];

    // 提取耗料量和时间戳
    const consumeWeights = roomData.map(item => item.weight); // 总量
    const consumeTimes = roomData.map(item => item.consumeTime); // 时间戳
    
    // 存储当前房间的数据
    consumeDataMap[roomKey] = {
      weights: consumeWeights,
      times: consumeTimes
    };

    // 合并时间戳到 Set
    consumeTimes.forEach(timestamp => {
      allConsumeDates.add(timestamp);
    });
  }

  // 将日期转换为已排序的数组
  const sortedDates = Array.from(allConsumeDates).sort();

  // 为每个房间填充缺失日期的数据
  for (let roomKey in consumeDataMap) {
    const { weights, times } = consumeDataMap[roomKey];
    const seriesData = sortedDates.map(date => {
      const index = times.indexOf(date);
      return index !== -1 ? weights[index] : 0; // 如果没有数据，填充 0
    });

    // 将数据添加到 consumeSer
    consumeSer.value.push({
      name: roomKey, // 房间名称
      type: "bar",
      stack: "总计", // 堆叠名称
      label: {
        show: true,
        position: "inside",
        textStyle: { color: "#fff" },
        formatter: function (params) {
          return params.value !== 0 ? params.value : ''; // 仅在值不为0时显示标签
        },
      },
      emphasis: {
        focus: "series",
      },
      data: seriesData, // 使用耗料量作为 Y 轴数据
    });
  }

  // 调用更新图表的函数
  const consumeChartInstance = echarts.init(consumeChartRef.value);
  updateChartData(sortedDates, consumeChartInstance, consumeSer.value); // 使用已排序的日期
  window.addEventListener("resize", () => {
    consumeChartInstance.resize();
  });
};
// 耗水
const getWater = async () => {
  waterSer.value = []; // 清空之前的系列数据

  // 定义静态数据（示例数据，假设每个房间的耗水量）
  const staticWaterData = {
    "gx01": [
      { waterTime: "2025-4-01", weight: 150 },
      { waterTime: "2025-4-02", weight: 160 },
      { waterTime: "2025-4-03", weight: 140 },
      { waterTime: "2025-4-04", weight: 155 },
      { waterTime: "2025-4-05", weight: 170 },
      { waterTime: "2025-4-06", weight: 165 },
      { waterTime: "2025-4-07", weight: 180 },
    ],
    "gx02": [
      { waterTime: "2025-4-01", weight: 120 },
      { waterTime: "2025-4-02", weight: 130 },
      { waterTime: "2025-4-03", weight: 125 },
      { waterTime: "2025-4-04", weight: 140 },
      { waterTime: "2025-4-05", weight: 135 },
      { waterTime: "2025-4-06", weight: 150 },
      { waterTime: "2025-4-07", weight: 145 },
    ],
  };

  const allConsumptionDates = new Set(); // 用于存储唯一的时间戳数据
  const waterDataMap = {}; // 用于存储每个房间的数据

  // 遍历静态数据
  for (let roomKey in staticWaterData) {
    const roomData = staticWaterData[roomKey];
    
    // 提取耗水量和时间戳
    const waterWeights = roomData.map(item => item.weight); // 总数
    const waterTimes = roomData.map(item => item.waterTime); // 时间戳
    
    // 存储当前房间的数据
    waterDataMap[roomKey] = {
      weights: waterWeights,
      times: waterTimes
    };

    // 合并时间戳到 Set
    waterTimes.forEach(timestamp => {
      allConsumptionDates.add(timestamp);
    });
  }

  // 将日期转换为已排序的数组
  const sortedDates = Array.from(allConsumptionDates).sort();

  // 为每个房间填充缺失日期的数据
  for (let roomKey in waterDataMap) {
    const { weights, times } = waterDataMap[roomKey];
    const seriesData = sortedDates.map(date => {
      const index = times.indexOf(date);
      return index !== -1 ? weights[index] : 0; // 如果没有数据，填充 0
    });

    // 将数据添加到 waterSer
    waterSer.value.push({
      name: roomKey, // 房间名称
      type: "bar",
      stack: "总计", // 堆叠名称
      label: {
        show: true,
        position: "inside",
        textStyle: { color: "#fff" },
        formatter: function (params) {
          return params.value !== 0 ? params.value : ''; // 仅在值不为0时显示标签
        },
      },
      emphasis: {
        focus: "series",
      },
      data: seriesData, // 使用耗水量作为 Y 轴数据
    });
  }

  // 调用更新图表的函数
  const waterChartInstance = echarts.init(waterChartRef.value);
  updateChartData(sortedDates, waterChartInstance, waterSer.value); // 使用已排序的日期
  window.addEventListener("resize", () => {
    waterChartInstance.resize();
  });
};
// 产蛋
const getEgg = async () => {
  eggSer.value = []; // 清空之前的系列数据

  // 定义静态数据（假设过去7天的产蛋量）
  const staticEggData = [100, 120, 140, 130, 115, 150, 160]; // 示例静态数据
  const staticDates = [
    '2025-4-01', 
    '2025-4-02', 
    '2025-4-03', 
    '2025-4-04', 
    '2025-4-05', 
    '2025-4-06', 
    '2025-4-07'
  ];

  // 将静态数据添加到 eggSer
  eggSer.value.push({
    name: "产蛋量", // 数据标识
    type: "bar",
    stack: "总计",
    label: {
      show: true,
      position: "inside",
      textStyle: { color: "#fff" },
      formatter: function (params) {
        return params.value !== 0 ? params.value : ''; // 仅在值不为0时显示标签
      },
    },
    emphasis: {
      focus: "series",
    },
    data: staticEggData, // 使用静态数据作为 Y 轴数据
  });

  // 调用更新图表的函数
  const eggChartInstance = echarts.init(eggChartRef.value);
  updateChartData(staticDates, eggChartInstance, eggSer.value); // 使用静态日期
  window.addEventListener("resize", () => {
    eggChartInstance.resize();
  });
};
// 产蛋率
const getEggRate = async () => {
  eggRateSer.value = []; // 清空之前的系列数据

  // 定义静态数据（示例数据，假设每个房间的产蛋率）
  const staticEggRateData = {
    "gx01": [
      { time: "2025-4-01", rate: 75 },
      { time: "2025-4-02", rate: 76 },
      { time: "2025-4-03", rate: 78 },
      { time: "2025-4-04", rate: 77 },
      { time: "2025-4-05", rate: 80 },
      { time: "2025-4-06", rate: 79 },
      { time: "2025-4-07", rate: 82 },
    ],
    "gx02": [
      { time: "2025-4-01", rate: 70 },
      { time: "2025-4-02", rate: 72 },
      { time: "2025-4-03", rate: 71 },
      { time: "2025-4-04", rate: 73 },
      { time: "2025-4-05", rate: 74 },
      { time: "2025-4-06", rate: 76 },
      { time: "2025-4-07", rate: 75 },
    ],
  };

  const eggRateDates = new Set(); // 用于存储日期数据
  const eggRateRoomData = {}; // 用于存储房间的数据

  // 遍历静态数据
  for (let eggRateKey in staticEggRateData) {
    const eggRateData = staticEggRateData[eggRateKey];

    // 存储当前产蛋房间的数据
    eggRateRoomData[eggRateKey] = {};
    eggRateData.forEach(item => {
      eggRateRoomData[eggRateKey][item.time] = item.rate; // 存储对应时间的产蛋率
      eggRateDates.add(item.time); // 添加日期到集合中
    });
  }

  const sortedDates = Array.from(eggRateDates).sort(); // 获取并排序所有日期

  // 为每个房间填充缺失日期的数据
  sortedDates.forEach(date => {
    for (let eggRateKey in eggRateRoomData) {
      if (!eggRateRoomData[eggRateKey][date]) {
        eggRateRoomData[eggRateKey][date] = 0; // 如果没有数据，填充 0
      }
    }
  });

  // 将数据转换为 series 格式
  for (let eggRateKey in eggRateRoomData) {
    const seriesData = sortedDates.map(date => eggRateRoomData[eggRateKey][date]); // 按日期顺序创建 Y 轴数据
    eggRateSer.value.push({
      name: eggRateKey, // 房间名称
      type: "bar",
      stack: "总计", // 堆叠名称
      label: {
        show: true,
        position: "inside",
        textStyle: { color: "#fff" },
        formatter: function (params) {
          return params.value !== 0 ? params.value : ''; // 仅在值不为0时显示标签
        },
      },
      emphasis: {
        focus: "series",
      },
      data: seriesData, // 使用对应日期的产蛋率数据
    });
  }

  // 调用更新图表的函数
  const eggRateChartInstance = echarts.init(eggRateChartRef.value);
  updateChartData(sortedDates, eggRateChartInstance, eggRateSer.value); // 使用已排序的日期
  window.addEventListener("resize", () => {
    eggRateChartInstance.resize();
  });
};
const getRate = async () => {
  rateSer.value = []; // 清空之前的系列数据

  // 定义静态数据（示例数据，假设每个房间的料单比）
  const staticRateData = {
    "gx01": [
      { time: "2025-4-01", ratio: 0.65 },
      { time: "2025-4-02", ratio: 0.66 },
      { time: "2025-4-03", ratio: 0.68 },
      { time: "2025-4-04", ratio: 0.67 },
      { time: "2025-4-05", ratio: 0.70 },
      { time: "2025-4-06", ratio: 0.69 },
      { time: "2025-4-07", ratio: 0.72 },
    ],
    "gx02": [
      { time: "2025-4-01", ratio: 0.60 },
      { time: "2025-4-02", ratio: 0.62 },
      { time: "2025-4-03", ratio: 0.61 },
      { time: "2025-4-04", ratio: 0.63 },
      { time: "2025-4-05", ratio: 0.64 },
      { time: "2025-4-06", ratio: 0.66 },
      { time: "2025-4-07", ratio: 0.65 },
    ],
  };

  const allDates = new Set(); // 使用 Set 来存储所有的日期
  const roomDataMap = {}; // 用于存储每个房间的数据

  // 遍历静态数据
  for (let rateKey in staticRateData) {
    const rateData = staticRateData[rateKey];

    // 存储当前房间的数据
    roomDataMap[rateKey] = {};
    rateData.forEach(item => {
      roomDataMap[rateKey][item.time] = item.ratio; // 将每个日期的 ratio 存储到 Map 中
      allDates.add(item.time); // 添加到所有日期的集合中
    });
  }

  // 为每个房间填充缺失日期的数据
  const sortedDates = Array.from(allDates).sort(); // 获取并排序所有日期
  sortedDates.forEach(date => {
    for (let roomKey in roomDataMap) {
      if (!roomDataMap[roomKey][date]) {
        roomDataMap[roomKey][date] = 0; // 如果没有数据，填充 0
      }
    }
  });

  // 将数据转换为 series 格式
  for (let roomKey in roomDataMap) {
    const seriesData = sortedDates.map(date => roomDataMap[roomKey][date]); // 按日期顺序创建 Y 轴数据
    rateSer.value.push({
      name: roomKey, // 房间名称
      type: "bar",
      stack: "总计", // 堆叠名称
      label: {
        show: true,
        position: "inside",
        textStyle: { color: "#fff" },
        formatter: function (params) {
          return params.value !== 0 ? params.value : ''; // 仅在值不为0时显示标签
        },
      },
      emphasis: {
        focus: "series",
      },
      data: seriesData, // 使用对应日期的料单比数据
    });
  }

  // 调用更新图表的函数
  const rateChartInstance = echarts.init(rateChartRef.value);
  updateChartData(sortedDates, rateChartInstance, rateSer.value); // 使用所有日期
  window.addEventListener("resize", () => {
    rateChartInstance.resize();
  });
};


onMounted(() => {
  get7Day();
  getEgg();
  getEggRate()
  getRate()
  getWater()
  getConsume()
  getDead()
});
</script>

<style scope lang="scss">
.product-container {
  height: 87%;
  width: 100%;
  .el-main {
    width: 100%;
    height: 100%;
    // background-color: yellow;
    overflow-x: hidden;
    padding: 15px;
    .el-row {
      height: 100%;
    }
    .el-card {
      border: none;
      color: #fff;
      height: 31.5%;
      background: linear-gradient(
        180deg,
        #001e54 0%,
        rgba(4, 51, 132, 0.29) 100%
      );
      .el-card__header {
        padding: 0 !important;
        min-height: 44px;
        border-bottom-color: #40a0ff6d;
        .card-header {
          font-size: 20px;
          min-height: 44px;
          padding: 0 0 0 16px;
          display: flex;
          align-items: center;
          span {
            color: #409eff;
            font-weight: bold;
            font-size: 20px;
          }
          .see-all {
            margin-left: 250px;
            font-weight: normal;
            font-size: 12px;
            padding: 2px;
            text-align: center;
            border: 1px solid #40a0ff6d;
            cursor: pointer;
          }
        }
      }
      .el-card__body {
        padding: 0 !important;
        height: calc(100% - 28px);
        min-height: calc(100% - 28px);
        .card-body {
          height: 100%;
        }
      }
    }
    .echarts_left {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    .main_view {
      margin-top: 10px;
      .main-house{
        background-color: skyblue;
        margin: 0 40%;
      }
      .cont-list {
        display: flex;
        background: rgba(36, 54, 111, 0.9);
        box-shadow: 0 4px 10px #0000001d;
        justify-content: space-around;
        align-items: center;
        padding: 10px;
        position: relative;
        .cont-item {
          display: flex;
          .cont-item-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            img {
              width: 44px;
              height: 44px;
              object-fit: contain;
            }
            span {
              font-size: 18px;
              font-weight: 500;
              color: #fff;
              line-height: 25px;
            }
          }
          .cont-item-right {
            padding-left: 20px;
            .day {
              font-size: 22px;
              font-weight: 700;
              color: #fff;
              line-height: 26px;
            }
            .data {
              font-size: 32px;
              font-weight: 700;
              color: #fff;
              line-height: 33px;
              padding-top: 10px;
            }
            .unit {
              font-size: 22px;
              font-weight: 600;
              color: #b6c1c4;
              line-height: 26px;
              padding-left: 10px;
            }
          }
        }
      }
    }
    .echarts_right {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
  }
}

.slaughter .card-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  .card-item {
    width: 48%;
  }
  .item-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 16px;
    .box-text {
      display: flex;
      flex-direction: column;
      gap: 12px;
      justify-content: space-between;
      align-items: center;
      .text-value {
        font-weight: bold;
        font-size: 18px;
        span {
          color: #fff;
          font-weight: normal;
          font-size: 14px;
        }
      }
    }
    img {
      height: 25%;
      width: 25%;
    }
  }
}
.monitor .card-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  .card-item {
    font-size: 16px;
    width: 38%;
    height: 38%;
    .item-box {
      height: 100%;
      width: 100%;
      .overview-video {
        width: 100%;
        height: 100%;
        // background-color: transparent;
      }
    }
  }
}
.envControl .card-body {
  .el-carousel {
    height: 100%;
    .el-carousel__container {
      height: 100%;
    }
    .el-carousel__item {
      text-align: center;
      margin-top: 6px;
    }
  }
  .card-item {
    .item-name {
      font-size: 18px;
    }
    .item-content {
      font-size: 18px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      .content {
        margin-left: 36px;
        margin-top: 10px;
        text-align: left;
        width: 40%;
        padding: 6px 0;
        .content-value {
          color: #409eff;
        }
      }
    }
  }
}
</style>
